<!DOCTYPE html>
<html lang="en" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Hugo is for lovers | PaperMod</title>
<meta name="keywords" content="hugo" />
<meta name="description" content="This is the summary Goto hugo releases and download the appropriate version for your os and architecture. Save it somewhere specific as we will be using it in the next step. More complete instructions are available at installing hugo">
<meta name="author" content="DevCows">
<link rel="canonical" href="http://localhost/blog/2015/08/03/hugo-is-for-lovers/" />
<link crossorigin="anonymous" href="/assets/css/stylesheet.min.c88963fe2d79462000fd0fb1b3737783c32855d340583e4523343f8735c787f0.css" integrity="sha256-yIlj/i15RiAA/Q&#43;xs3N3g8MoVdNAWD5FIzQ/hzXHh/A=" rel="preload stylesheet" as="style">
<script defer crossorigin="anonymous" src="/assets/js/highlight.min.b95bacdc39e37a332a9f883b1e78be4abc1fdca2bc1f2641f55e3cd3dabd4d61.js" integrity="sha256-uVus3DnjejMqn4g7Hni&#43;Srwf3KK8HyZB9V4809q9TWE="
    onload="hljs.initHighlightingOnLoad();"></script>
<link rel="icon" href="http://localhost/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://localhost/apple-touch-icon.png">
<link rel="mask-icon" href="http://localhost/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<meta name="generator" content="Hugo 0.103.1" />
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --hljs-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript><meta property="og:title" content="Hugo is for lovers" />
<meta property="og:description" content="This is the summary Goto hugo releases and download the appropriate version for your os and architecture. Save it somewhere specific as we will be using it in the next step. More complete instructions are available at installing hugo" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://localhost/blog/2015/08/03/hugo-is-for-lovers/" /><meta property="article:section" content="blog" />
<meta property="article:published_time" content="2015-08-03T13:39:46&#43;02:00" />
<meta property="article:modified_time" content="2015-08-03T13:39:46&#43;02:00" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Hugo is for lovers"/>
<meta name="twitter:description" content="This is the summary Goto hugo releases and download the appropriate version for your os and architecture. Save it somewhere specific as we will be using it in the next step. More complete instructions are available at installing hugo"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Blog",
      "item": "http://localhost/blog/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "Hugo is for lovers",
      "item": "http://localhost/blog/2015/08/03/hugo-is-for-lovers/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Hugo is for lovers",
  "name": "Hugo is for lovers",
  "description": "This is the summary Goto hugo releases and download the appropriate version for your os and architecture. Save it somewhere specific as we will be using it in the next step. More complete instructions are available at installing hugo",
  "keywords": [
    "hugo"
  ],
  "articleBody": "Step 1. Install Hugo Goto hugo releases and download the appropriate version for your os and architecture.\nSave it somewhere specific as we will be using it in the next step.\nMore complete instructions are available at installing hugo\nStep 2. Build the Docs Hugo has its own example site which happens to also be the documentation site you are reading right now.\nFollow the following steps:\nClone the hugo repository Go into the repo Run hugo in server mode and build the docs Open your browser to http://localhost:1313 Corresponding pseudo commands:\ngit clone https://github.com/spf13/hugo\rcd hugo\r/path/to/where/you/installed/hugo server --source=./docs\r\u003e 29 pages created\r\u003e 0 tags index created\r\u003e in 27 ms\r\u003e Web Server is available at http://localhost:1313\r\u003e Press ctrl+c to stop\rOnce you’ve gotten here, follow along the rest of this page on your local build.\nStep 3. Change the docs site Stop the Hugo process by hitting ctrl+c.\nNow we are going to run hugo again, but this time with hugo in watch mode.\n/path/to/hugo/from/step/1/hugo server --source=./docs --watch\r\u003e 29 pages created\r\u003e 0 tags index created\r\u003e in 27 ms\r\u003e Web Server is available at http://localhost:1313\r\u003e Watching for changes in /Users/spf13/Code/hugo/docs/content\r\u003e Press ctrl+c to stop\rOpen your favorite editor and change one of the source content pages. How about changing this very file to fix the typo. How about changing this very file to fix the typo.\nContent files are found in docs/content/. Unless otherwise specified, files are located at the same relative location as the url, in our case docs/content/overview/quickstart.md.\nChange and save this file.. Notice what happened in your terminal.\n\u003e Change detected, rebuilding site\r\u003e 29 pages created\r\u003e 0 tags index created\r\u003e in 26 ms\rRefresh the browser and observe that the typo is now fixed.\nNotice how quick that was. Try to refresh the site before it’s finished building.. I double dare you. Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.\nStep 4. Have fun The best way to learn something is to play with it.\n",
  "wordCount" : "349",
  "inLanguage": "en",
  "datePublished": "2015-08-03T13:39:46+02:00",
  "dateModified": "2015-08-03T13:39:46+02:00",
  "author":{
    "@type": "Person",
    "name": "DevCows"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://localhost/blog/2015/08/03/hugo-is-for-lovers/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "PaperMod",
    "logo": {
      "@type": "ImageObject",
      "url": "http://localhost/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://localhost" accesskey="h" title="PaperMod (Alt + H)">PaperMod</a>
            <span class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
            </span>
        </div>
        <ul id="menu">
            <li>
                <a href="http://localhost/" title="Home">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="http://localhost/img/template-easy-customize.png" title="Features">
                    <span>Features</span>
                </a>
            </li>
            <li>
                <a href="http://localhost/img/template-homepage.png" title="Portfolio">
                    <span>Portfolio</span>
                </a>
            </li>
            <li>
                <a href="http://localhost" title="All Pages">
                    <span>All Pages</span>
                </a>
            </li>
            <li>
                <a href="http://localhost/blog/" title="Blog">
                    <span>Blog</span>
                </a>
            </li>
            <li>
                <a href="http://localhost/faq/" title="FAQ">
                    <span>FAQ</span>
                </a>
            </li>
            <li>
                <a href="http://localhost/contact/" title="Contact">
                    <span>Contact</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    
    <h1 class="post-title">
      Hugo is for lovers
    </h1>
    <div class="post-meta"><span title='2015-08-03 13:39:46 +0200 +0200'>August 3, 2015</span>&nbsp;·&nbsp;DevCows

</div>
  </header> 
  <div class="post-content"><h2 id="step-1-install-hugo">Step 1. Install Hugo<a hidden class="anchor" aria-hidden="true" href="#step-1-install-hugo">#</a></h2>
<p>Goto <a href="https://github.com/spf13/hugo/releases">hugo releases</a> and download the
appropriate version for your os and architecture.</p>
<p>Save it somewhere specific as we will be using it in the next step.</p>
<p>More complete instructions are available at <a href="/overview/installing/">installing hugo</a></p>
<h2 id="step-2-build-the-docs">Step 2. Build the Docs<a hidden class="anchor" aria-hidden="true" href="#step-2-build-the-docs">#</a></h2>
<p>Hugo has its own example site which happens to also be the documentation site
you are reading right now.</p>
<p>Follow the following steps:</p>
<ol>
<li>Clone the <a href="http://github.com/spf13/hugo">hugo repository</a></li>
<li>Go into the repo</li>
<li>Run hugo in server mode and build the docs</li>
<li>Open your browser to http://localhost:1313</li>
</ol>
<p>Corresponding pseudo commands:</p>
<pre><code>git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 27 ms
&gt; Web Server is available at http://localhost:1313
&gt; Press ctrl+c to stop
</code></pre>
<p>Once you&rsquo;ve gotten here, follow along the rest of this page on your local build.</p>
<h2 id="step-3-change-the-docs-site">Step 3. Change the docs site<a hidden class="anchor" aria-hidden="true" href="#step-3-change-the-docs-site">#</a></h2>
<p>Stop the Hugo process by hitting ctrl+c.</p>
<p>Now we are going to run hugo again, but this time with hugo in watch mode.</p>
<pre><code>/path/to/hugo/from/step/1/hugo server --source=./docs --watch
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 27 ms
&gt; Web Server is available at http://localhost:1313
&gt; Watching for changes in /Users/spf13/Code/hugo/docs/content
&gt; Press ctrl+c to stop
</code></pre>
<p>Open your <a href="http://vim.spf13.com">favorite editor</a> and change one of the source
content pages. How about changing this very file to <em>fix the typo</em>. How about changing this very file to <em>fix the typo</em>.</p>
<p>Content files are found in <code>docs/content/</code>. Unless otherwise specified, files
are located at the same relative location as the url, in our case
<code>docs/content/overview/quickstart.md</code>.</p>
<p>Change and save this file.. Notice what happened in your terminal.</p>
<pre><code>&gt; Change detected, rebuilding site

&gt; 29 pages created
&gt; 0 tags index created
&gt; in 26 ms
</code></pre>
<p>Refresh the browser and observe that the typo is now fixed.</p>
<p>Notice how quick that was. Try to refresh the site before it&rsquo;s finished building.. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
<h2 id="step-4-have-fun">Step 4. Have fun<a hidden class="anchor" aria-hidden="true" href="#step-4-have-fun">#</a></h2>
<p>The best way to learn something is to play with it.</p>


  </div>

  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="http://localhost/tags/hugo/">hugo</a></li>
    </ul>
  </footer>
</article>
    </main>
    
<footer class="footer">
    <span>&copy; 2022 <a href="http://localhost">PaperMod</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
</body>

</html>
